<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>我的借款</span>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#e1e4e5' }"
      >
        <el-table-column prop="amount" label="借款金额" width="180">
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="duration" label="借款期限（月）">
        </el-table-column>
        <el-table-column prop="loanRate" label="借款利率"> </el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          :formatter="AuditStatus"
        >
        </el-table-column>
        <el-table-column
          prop="debt_match_status"
          label="匹配状态"
          :formatter="MatchingState"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="RepaymentSchedule(scope.row.debt_id)"
              :disabled="checkRepayDisable(scope.row.debt_match_status)"
              >还款计划</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="onPageChange"
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        :page-count="filterData.totalPages"
        :current-page="filterData.curPage"
        :page-size="filterData.perPage"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="还款计划" width="45%" :visible.sync="scrolling">
      <el-card class="box-card">
        <el-table :data="rePayPlanTableData" style="width: 100%" stripe>
          <el-table-column prop="id" label="当前期" width="180">
          </el-table-column>
          <el-table-column prop="receivableDate" label="还款日期" width="180">
          </el-table-column>
          <el-table-column prop="receivableMoney" label="还款金额">
          </el-table-column>
          <el-table-column
            prop="isReturned"
            label="还款状态"
            :formatter="isReturnedStateFormat"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button 
              type="success" 
              size="mini" 
              @click="openthen(scope.row)"
              :disabled="disabledone(scope.row.isReturned)"
                >还款</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
    <el-dialog title="还款确定" width="20%" :visible.sync="open">
      <span>还款金额为：{{ repayData.repayAmount }},即将从账户余额还款</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="repayment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 还款计划的弹幕
      scrolling: false,
      // 还款的弹幕
      open: false,
      // 还款的数据
      repayData: {
        // 还款的金额
        repayAmount: "",
        repay_id: "",
      },
      // 列表
      debt_id: {},
      // 分页表格
      filterData: {
        // 总页数
        totalPages: 2,
        // 当前页
        curPage: 1,
        // 每页的数量
        perPage: 3,
      },
      // 数据的表格
      tableData: [],
      // 还款计划的表格
      rePayPlanTableData: [],
    };
  },
  methods: {
    ...mapActions({
      myLoeanApply: "loan/myLoeanApply",
      myRepayPlan: "loan/myRepayPlan",
      DefiniteRepayment: "loan/DefiniteRepayment",
    }),
    // 还款状态
    disabledone(isReturned){
      return isReturned ? true : false
    },
    // 确定还款
    repayment() {
      this.DefiniteRepayment(this.repayData).then((res) => {
        // 刷新数据
        this.getmyRepayPlan();
        // 关闭弹幕
        this.open = false;
        this.$message({
          message: "还款成功",
          type: "success",
        });
      });
    },
    // 刷新数据
    getmyRepayPlan() {
      this.myRepayPlan(this.debt).then((res) => {
        // console.log(res);
        this.rePayPlanTableData = res;
        this.filterData.totalPages = res.paginateInfo.pages;
        this.scrolling = true;     
      });
    },
    // 点击还款
    openthen(row) {
      // console.log(row.id)
      this.repayData.repay_id = row.id;
      this.repayData.repayAmount = row.receivableMoney;
      this.open = true;
      console.log(this.repayData);
    },
    getmyLoanApply() {
      this.myLoeanApply(this.filterData).then((res) => {
        // console.log(res.content);
        this.tableData = res.content;
      });
    },
    AuditStatus(row) {
      // console.log(row);
      if (row.status === 0) {
        return "审批中";
      } else if (row.status === 1) {
        return "已通过";
      } else if (row.status === 2) {
        return "驳回";
      }
    },
    MatchingState(row) {
      //   console.log(row);
      if (row.debt_match_status == 0) {
        return "待匹配";
      } else if (row.debt_match_status == 1) {
        return "部分匹配";
      } else if (row.debt_match_status == 2) {
        return "完全匹配";
      }
    },
    // 当前页数发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getmyLoanApply();
    },
    // 点击还款计划
    RepaymentSchedule(id) {
      // 将弹幕显示出来
      this.scrolling = true;
      this.debt = { debt_id: id };
      this.myRepayPlan(this.debt).then((res) => {
        this.rePayPlanTableData = res;
      });
    },
    // 检查还款按钮
    checkRepayDisable(isReturned) {
      return isReturned == 1 || isReturned == 2 ? false : true;
    },
    // 还款的状态
    isReturnedStateFormat(row) {
      // console.log(row);
      if (row.isReturned === 0) {
        return "未还款";
      } else if (row.isReturned === 1) {
        return "已还款";
      }
    },
  },
  created() {
    this.getmyLoanApply();
  },
  // 钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    console.log("el", this.$el);
  },
};
</script>
<style lang="scss" scoped>
</style>